<script setup>
import {
  UserFilled,
  Delete,
  Key
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userGetPoliciesService } from '@/api/user'
import { identityDeleteService, identityUpdatePasswordService } from '@/api/identity'

const router = useRouter()
const route = useRoute()

// 接收传递的参数
const id = route.query.id
const username = route.query.username
if (!id || !username) {
  router.push('/identity')
}

// 获取用户的策略列表
const userPoliciesList = ref([])

const getUserPoliciesList = async () => {
  const res = await userGetPoliciesService(id)
  userPoliciesList.value = res.data.data
}
getUserPoliciesList()

// 点击表格数据行的事件处理
const onRowClick = async (row) => {
  router.push(`/policies/show?id=${row.id}&name=${row.name}`)
}

// 删除用户
const onDeleteUser = async () => {
  await ElMessageBox.confirm('你确定要删除该用户么', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  await identityDeleteService(id)
  router.push('/identity')
}

// 修改用户密码
const form = ref()
const isShowDialog = ref(false)

const passwordModel = ref({
  password: '',
  repassword: ''
})

const rules = {
  password: [
    { required: true, message: '请输入新密码', trigger: 'submit' }
  ],
  repassword: [
    { required: true, message: '请输入再次输入新密码', trigger: 'submit' },
    {
      validator: (rule, value, callback) => {
        if (value != passwordModel.value.password) {
          callback(new Error('两次输入的密码不相同！'))
        } else {
          callback()
        }
      },
      trigger: 'submit'
    }
  ]
}

const onPutPassword = async () => {
  await form.value.validate()
  await identityUpdatePasswordService(id, passwordModel.value.password)
  isShowDialog.value = false
}

</script>

<template>
  <el-container>
    <el-header style="border-bottom: 1px solid rgb(229, 229, 229); display: flex;">
      <div style="display: flex; align-items: center;">
        <el-icon size="50" style="margin-right: 5px;">
          <UserFilled />
        </el-icon>
        <div>
          <div style="font-size: 22px;"><strong>{{ username }}</strong></div>
        </div>
      </div>
      <div style="flex: 1; display: flex; justify-content: flex-end; align-items: center;">
        <el-tooltip
        effect="dark"
        content="删除用户"
        placement="bottom">
          <span @click="onDeleteUser" style="padding: 5px; margin-left: 10px; border: 1px solid var(--el-color-danger); cursor: pointer;"><el-button size="small" type="danger" :icon="Delete" circle /></span>
        </el-tooltip>

        <el-tooltip
        effect="dark"
        content="修改用户密码"
        placement="bottom">
          <span @click="isShowDialog = true" style="padding: 5px; margin-left: 10px; border: 1px solid var(--el-color-info); cursor: pointer;"><el-button size="small" type="info" :icon="Key" circle /></span>
        </el-tooltip>
      </div>
    </el-header>
    <el-main>
      <div style="background-color: whitesmoke; border: 1px solid rgb(229, 229, 229);">
        <el-table :data="userPoliciesList" @row-click="onRowClick" highlight-current-row="true" row-style="cursor: pointer" v-loading="loading">
          <el-table-column prop="name" label="拥有的策略"></el-table-column>

          <template #empty>
            <el-empty description="没有策略"></el-empty>
          </template>
        </el-table>
      </div>

      <el-dialog style="font-weight: bold;" width="25%" v-model="isShowDialog" title="修改用户密码">
        <el-form ref="form" :model="passwordModel" :rules="rules" label-width="auto" @submit.prevent>
          <el-form-item prop="password" label="新密码" label-position="left">
            <el-input name="password" v-model="passwordModel.password" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="repassword" label="再次输入新密码" label-position="left">
            <el-input @keyup.enter="onPutPassword" v-model="passwordModel.repassword" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button color="black" @click="onPutPassword">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </el-main>
  </el-container>

</template>

<style lang="sass" scoped>
</style>